import { Avatar, Icon, Menu, Spin } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

import IconFont from '../Icon'

@connect(({ user }) => ({
  user
}))

class AvatarDropdown extends React.Component {
  onMenuClick = event => {
    // const { key } = event;

    // if (key === 'logout') {
    //   const { dispatch } = this.props;

    //   if (dispatch) {
    //     dispatch({
    //       type: 'login/logout',
    //     });
    //   }

    //   return;
    // }

    // router.push(`/account/${key}`);
    localStorage.removeItem('tk')
    router.push('/login')

  };

  componentDidMount(){
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
      user
    } = this.props;
    console.log(user)
  }

  render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    return this.props.user.userInfo && this.props.user.userInfo.Name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
          <span className={`${styles.action} ${styles.account}`}>
            <Avatar size="small" className={styles.avatar} src={this.props.user.avatar} alt="avatar" />
            <span className={styles.name}>{this.props.user.userInfo.Name}</span>
            <IconFont type="icon-xiala" style={{ fontSize: '16px', marginLeft: '10px'}} />
          </span>
      </HeaderDropdown>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
